<!-- 单位管理 -->
<template>
  <div class="app-container">
    <div class="statistics-list">
      <ul>
        <li>
          <p class="title">消防检测平台</p>
          <router-link target="_blank" to="/controlManage/remoteControlCenter">
            <div class="img-column">
              <img :src="statisticsImg" alt="">
            </div>
          </router-link>
        </li>
        <li class="center">
          <p class="title">消防检测平台</p>
          <router-link target="_blank" to="/controlManage1/remoteControlCenter1">
            <div class="img-column">
              <img :src="statisticsImg" alt="">
            </div>
          </router-link>
        </li>
        <li>
          <p class="title">消防检测平台</p>
          <router-link target="_blank" to="/controlManage2/remoteControlCenter2">
            <div class="img-column">
              <img :src="statisticsImg" alt="">
            </div>
          </router-link>
        </li>
        <li>
          <p class="title">消防检测平台</p>
          <router-link target="_blank" to="/controlManage3/remoteControlCenter3">
            <div class="img-column">
              <img :src="statisticsImg" alt="">
            </div>
          </router-link>
        </li>
        <li class="center">
          <p class="title">消防检测平台</p>
          <router-link target="_blank" to="/controlManage4/remoteControlCenter4">
            <div class="img-column">
              <img :src="statisticsImg" alt="">
            </div>
          </router-link>
        </li>
        <li class="addBtn" @click="addStatistics">
          <i class="el-icon-plus"/><span>添加新的大屏</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import statisticsImg from '@/assets/statistics-img.png'
export default {
  name: 'Order',
  data() {
    return {
      statisticsImg
    }
  },
  created() {
    // this.getList()
  },
  methods: {
    addStatistics() {
      // this.$router.push({ path: '/controlManage/remoteControlCenter1' })
      this.$message.warning('暂不支持此操作！')
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .app-container{
    min-height: 580px;
  }
  .statistics-list{
    border-radius:4px;
    padding: 20px;
    ul{
      overflow: hidden;
      padding:10px 0.3% 0px 0.3%;
      li{
        width: 30%;
        height:220px;
        line-height: 220px;
        display: block;
        float: left;
        padding-top: 40px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-box-shadow: 0px 0px 5px 3px #f3f3f3;
        box-shadow: 0px 0px 5px 3px #f3f3f3;
        border: 1px solid #f3f3f3;
        border-radius: 20px;
        overflow: hidden;
        position: relative;
        margin-bottom: 20px;
        cursor: pointer;
        &:hover{
          box-shadow:0px 1px 5px 5px rgba(0,0,0,0.24);
        }
      }
      li.addBtn{
        text-align: center;
        padding: 0;
        cursor: pointer;
        i{
          color: #E8441C;
          font-size: 120px;
          margin-top: 40px;
          font-size: 70px;
        }
        span{
          position: absolute;
          left: 0;
          bottom: 30px;
          display: block;
          width: 100%;
          height: 35px;
          line-height: 35px;
          text-align: center;
          color: #717070;
          font-size: 18px;
        }
      }
      li.center{
        margin: 0 4.5% 20px 4.5%;
      }
      p{
        width: 100%;
        height: 34px;
        line-height: 34px;
        margin: 0;
        padding-left: 34px;
        font-size: 14px;
        position: absolute;
        top: 5px;
      }
      .img-column{
        width:100%;
        height: 100%;
        padding: 0px 34px 34px 34px;
        box-sizing: border-box;
      }
      img{
        width: 100%;
        height: 100%;
        display: block;
        margin: 0px auto;
      }
    }
  }
</style>
